<!DOCTYPE html>
<html>
<head>
    
    <meta charset="UTF-8">
    <title>太阳</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 30px auto 0;
            background-color: #21223a;
        }

        .sun {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #fffaa9;
            border-radius: 50%;
            box-shadow: 0 0 60px #ffcfa9, 0 0 100px #b9a018;
        }

        .sun .eye {
            position: absolute;
            top: 50px;
            width: 48px;
            height: 36px;
            background-color: #ffcfa9;
            border-radius: 50%;
            animation: animate-move 1s linear infinite alternate;
        }

        .sun .left-eye {
            left: 30px;
        }

        .sun .right-eye {
            left: 90px;
        }

        .sun .eye-inner {
            position: absolute;
            width: 48px;
            height: 36px;
            top: 5px;
            left: 0;
            background-color: #fffaa9;
            border-radius: 50%;
        }

        .sun .eye::before, 
        .sun .eye::after {
            content: '';
            position: absolute; /*自动变成block，表现形式为行内块*/
            top: 0;
            width: 6px;
            height: 18px;
            background-color: #ffcfa9;
            border-radius: 50%;
            z-index: -1;
        }

        .sun .left-eye::before, .sun .left-eye::after {
            left: 0;
        }

        .sun .left-eye::before {
            transform: translate(3px, 0) rotate(-45deg);
        }

        .sun .left-eye::after {
            transform: translate(10px, -6px) rotate(-45deg);
        }


        .sun .right-eye::before, .sun .right-eye::after {
            right: 0;
        }

        .sun .right-eye::before {
            transform: translate(-3px, 0) rotate(45deg);
        }

        .sun .right-eye::after {
            transform: translate(-10px, -6px) rotate(45deg);
        }

        .sun .rays {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            animation: animate-rotate 2s linear infinite alternate;
        }

        .sun .rays:hover {
            animation-play-state: paused;
        }

        .sun .beam {
            position: absolute;
            width: 40px;
            height: 110px;
            opacity: 0.03;
            background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), #ffcfa9 40%, #ffcfa9);
        }

        .sun .beam:nth-of-type(odd) {
            width: 30px;
        }

        .beam:nth-of-type(1) {
            transform: translate(-40px, -40px) rotate(120deg);
        }

        .beam:nth-of-type(2) {
            transform: translate(24px, -80px) rotate(163deg);
        }

        .beam:nth-of-type(3) {
            transform: translate(90px, -80px) rotate(190deg);
        }

        .beam:nth-of-type(4) {
            transform: translate(155px, -40px) rotate(230deg);
        }

        .beam:nth-of-type(5) {
            transform: translate(170px, 40px) rotate(280deg);
        }

        .beam:nth-of-type(6) {
            transform: translate(130px, 100px) rotate(310deg);
        }

        .beam:nth-of-type(7) {
            transform: translate(51px, 128px) rotate(358deg);
        }

        .beam:nth-of-type(8) {
            transform: translate(170px, 40px) rotate(280deg);
        }

        .beam:nth-of-type(9) {
            transform: translate(-26px, 95px) rotate(406deg);
        }

        .beam:nth-of-type(10) {
            transform: translate(-64px, 28px) rotate(452deg);
        }

        .earth {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 30px;
            height: 30px;
            background-color: #6fd4dd;
            border-radius: 50%;
            transform-origin: 150px 150px;

            animation: animate-rotate 5s linear infinite;
        }

        @keyframes animate-rotate {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes animate-move {
            from {
                transform: translate(-6px);
            }

            50% {
                transform: translate(0);
            }

            100% {
                transform: translate(6px);
            }
        }
    </style>
</head>
<body>
    <h1 class="animate__rubberBand">吱吱吱吱在</h1>
    <div class="box">
        <div class="sun">
            <div class="eye left-eye">
                <div class="eye-inner"></div>
            </div>
            <div class="eye right-eye">
                <div class="eye-inner"></div>
            </div>

            <div class="rays">
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
                <div class="beam"></div>
            </div>
        </div>

        <div class="earth"></div>
    </div>
</body>
</html>